<template page>
  <style>
    :host {
      display: block;
      height: 100%;
    }

    .container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    h3 {
      font-size: 18px;
      padding: 16px 0 0 16px;
      margin: 0;
      text-align: center;
    }

    .agreement-place {
      position: relative;
      flex: 1;
    }

    .article {
      position: absolute;
      box-sizing: border-box;
      left: 16px;
      top: 16px;
      padding: 16px;
      width: calc(100% - 32px);
      height: calc(100% - 16px);
      background-color: var(--md-sys-color-surface);
      overflow: auto;
    }
  </style>
  <div class="container">
    <h3>
      <n-desc space="installer" name="agreement"></n-desc>
    </h3>
    <div class="agreement-place">
      <div class="article">
        <n-desc space="installer" name="agreement" article></n-desc>
      </div>
    </div>
    <div
      style="
        display: flex;
        align-items: center;
        padding: 8px 24px;
        height: 50px;
      "
    >
      <p-button on:click="clickClose" variant="text" style="margin-left: auto">
        <n-desc space="installer" name="disagree"></n-desc>
      </p-button>
      <p-button on:click="nextStep" style="margin-left: 16px">
        <n-desc space="installer" name="agreenAndInstall"></n-desc>
      </p-button>
    </div>
  </div>
  <script>
    import { getText } from "/packages/i18n/data.js";

    export default {
      proto: {
        clickClose() {
          const text = getText("p2.closeAlert", "installer");
          window.alert(text);
          window.close();
        },
        nextStep() {
          $("n-installer").step++;
        },
      },
    };
  </script>
</template>
